<template>
    <div class="page-container">
        <div class="page-row">
            <el-form :inline="true" :model="queryParam" size="small">
                <el-form-item label-width="商品名称" prop="spuName" style="margin-right: 15px;">
                    <el-input style="height: 26px" v-model="queryParam.nickname" placeholder="请输入商品名称" :suffix-icon="Search" @keydown.enter.prevent="search"></el-input>
                </el-form-item>
            </el-form>
            <el-button type="primary" size="small" @click="search">查询</el-button>
        </div>
        <el-table :data="list" style="width: 100%" >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="header" label="头像">
                <template #default="scope">
                    <el-avatar :src="scope.row.header" />
                </template>
            </el-table-column>            
            <el-table-column prop="nickname" label="用户昵称" />
            <el-table-column prop="skuDefaultImg" label="商品">
                <template #default="scope">
                    <el-avatar :src="scope.row.skuDefaultImg" />
                </template>
            </el-table-column>  
            <el-table-column prop="skuTitle" label="商品名称" />
            <el-table-column prop="price" label="售价" >
                <template #default="scope">
                    <span style="color: red">￥ {{ scope.row.price }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="浏览时间" />
        </el-table>
        <div class="page-block">
            <el-pagination v-model:currentPage="queryParam.current" v-model:page-size="queryParam.size"
                :page-sizes="[10, 20, 30, 40]" :small="true" :disabled="false" :background="false"
                layout="total, sizes, prev, pager, next, jumper" :total="total" :hide-on-single-page="false"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import { reactive, toRefs, onMounted, ref } from 'vue'
import { spoorApi } from '/@/api/ums/spoor/index'

export default {
    name: "spoor",
    setup() {
        const api = spoorApi()
        const state = reactive({
            list: [], // 列表数据
            total: 0, // 总条数
            queryParam: {
                current: 1, // 当前页
                size: 10,   // 页大小
                nickname: '', // 用户昵称
                type: null, // 类型
            },
        })
        onMounted(() => {
            getList()
        })
        // 获取列表数据
        const getList = () => {
            api.getList(state.queryParam).then(res => {
                state.list = res.data.records
                state.total = res.data.total
            })
        }
        // 查询
        const search = () => {
            getList()
        }
        // 条数修改
        const handleSizeChange = e => {
            state.queryParam.size = e
            getList()
        }
        // 页码修改
        const handleCurrentChange = e => {
            state.queryParam.current = e
            getList()
        }
        return {
            getList,
            search,
            handleSizeChange,
            handleCurrentChange,
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss">
.page-row{
    display: flex;
    flex-direction: row;
    align-content: center;
}
</style>